<template>

	<view>
		<view class="first">
			<view class="first-xxk">
				<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">系统消息</view>
				<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">新闻公告</view>
				<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">成交消息</view>
			</view>
			<view class="first-xxx">
				<view class="first-zzz" v-show="Inv == 0">
					<navigator url="/pages/kefukf/kefukf">
						<view class="zjqu">
							<view class="kefunima">
								<image class="kefutu" src="/static/kefutu.png" mode="aspectFill"></image>
								<view class="kefuz">
									<view><text class="kefuzi">客服12138号</text></view>
									<view><text class="slsm">亲，你到底是什么交换机补偿款把车开回B出口个发卡夫卡勾搭啊大大大大大哇哒我打算大无大所挖到撒多无大</text></view>
									
								</view>

							</view>
						</view>
					</navigator>
					<text class="first-xxx_z">没有更多数据了!</text>
				</view>
				<view class="first-zzz" v-show="Inv == 1">
					<text class="sj">2021-11-18021:21:56</text>

					<navigator url="/pages/shengming/shengming">
						<view class="zjqu">
							<view class="first-msg">
								<text class="first-msg_xx">关于禁止未成年人交易的声明</text>
								<view class="first-msg_sm">点击查看 ></view>
							</view>
						</view>
					</navigator>

					<text class="first-xxx_z">没有更多数据了!</text>
				</view>
				<view class="first-zzz" v-show="Inv == 2">
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<view class="youxzi">穿越火线-西部大区-四川一区</view>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<view class="youxzi">穿越火线-西部大区-四川一区</view>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<view class="youxzi">穿越火线-西部大区-四川一区</view>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<view class="youxzi">穿越火线-西部大区-四川一区</view>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<text class="youxzi">穿越火线-西部大区-四川一区</text>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<text class="youxzi">穿越火线-西部大区-四川一区</text>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<text class="youxzi">穿越火线-西部大区-四川一区</text>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<text class="youxzi">穿越火线-西部大区-四川一区</text>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<text class="youxzi">穿越火线-西部大区-四川一区</text>
							</view>
						</view>

					</view>
					<view class="first-cj">
						<view class="first-cj_sp">
							<view>
								<view class="first-cj_sp_z">
									<image class="tutu" src="/static/chus.png" mode="aspectFill"></image>
									<view class="zizi">
										<text class="fhzi">夜半三更计较三更有个认真跑进了冒失坑，于是奋斗于去抗争最后壮烈西征，我觉得是啊黑色大家不用猜都知道了吧</text>
										<text class="mnzi">￥888.0</text>
									</view>
								</view>
								<view class="youxzi">穿越火线-西部大区-四川一区</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>



<script>
	export default {

		data() {

			return {

				Inv: 0

			}

		},

		methods: {

			changeTab(Inv) {

				that.navIdx = Inv;



			},

		}

	}
</script>



<style>
	.kefuzi{
		font-size: 30rpx;
		font-weight: 500;
	}
	
	
	.slsm{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 20rpx;
		font-weight: 100;
		color: #545454;
	}
	.kefuz{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 10rpx;
	}
	.kefutu {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.kefunima {
		background-color: #FFFFFF;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		margin-top: 20rpx;
	}

	.youxzi {
		font-size: 25rpx;
		font-weight: 100;
		padding-left: 10rpx;
		margin-top: 20rpx;

	}

	.mnzi {
		font-size: 30rpx;
		color: #ff6a00;
		display: flex;
		justify-content: flex-end;
		padding-right: 10rpx;
	}

	.fhzi {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
		padding-right: 10rpx;

	}

	.first-cj {
		display: flex;
		justify-content: center;
		width: 100%;

	}

	.zjqu {
		display: flex;
		width: 100%;
		justify-content: center;
		/* margin-top: 20rpx; */

	}

	.sj {
		padding-top: 30rpx;
		font-size: 15rpx;
		font-weight: 400;
		display: flex;
		justify-content: center;

	}

	.tutu {
		width: 180rpx;
		height: 128rpx;
		flex: 1;
	}

	.zizi {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 3;
		margin-left: 10rpx;
	}

	page {
		background-color: #f0f0f0;
	}

	.first-cj_sp_z {
		display: flex;
		padding-left: 10rpx;
		padding-top: 10rpx;
	}



	.first-cj_sp {
		background-color: #FFFFFF;
		width: 96%;
		height: 220rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;


	}


	.first-msg_sm {
		font-size: 25rpx;
		background-color: #cee1ff;
		width: 140rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		border-radius: 20rpx;
	}

	.first-msg_xx {
		font-size: 30rpx;
	}

	.first-msg {
		width: 94%;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-around;


		height: 150rpx;
		padding-left: 20rpx;

	}

	.first-xxx_z {
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

	}

	.first {
		/* 		background-color: #FFFFFF;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column; */

	}

	.first-xxk {
		background-color: #FFFFFF;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;
		font-weight: 600;
	}

	.first-xxx {
		width: 100%;
		height: 100%;
	}

	.inv-h {
		font-size: 25rpx;
		flex: 1;
		text-align: center;
		color: #000000;
		height: 100rpx;
		line-height: 100upx;
	}

	.inv-h-se {
		color: #ff0000;
		border-bottom: 1rpx solid #ff0000;
	}
</style>
